<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vue-卷帘</title>
    <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
    <style type="text/css">
        body {
            margin: 0px !important;
        }

        #app {
            margin: 0 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <mapgis-compare :orientation="orientation">
            <mapgis-web-map :map-style="mapStyle" :zoom="mapZoom" :center="outerCenter" :crs="mapCrs" slot="beforeMap">
                <mapgis-ogc-wmts-layer
                        v-bind:layer-id="layerWmtsId"
                        v-bind:source-id="sourceWmtsId"
                        v-bind:base-url="wmtsurl1"
                        v-bind:tile-matrix-set="tileMatrixSet1"
                        v-bind:wmts-layer="layer1"
                        v-bind:format="format"
                        v-bind:token="token"
                >
                </mapgis-ogc-wmts-layer>
            </mapgis-web-map>
            <mapgis-web-map :map-style="mapStyle" :zoom="mapZoom" :center="outerCenter" :crs="mapCrs" slot="afterMap">
                <mapgis-ogc-wmts-layer
                        v-bind:layer-id="layerWmtsId"
                        v-bind:source-id="sourceWmtsId"
                        v-bind:base-url="wmtsurl2"
                        v-bind:tile-matrix-set="tileMatrixSet2"
                        v-bind:wmts-layer="layer2"
                        v-bind:format="format"
                        v-bind:token="token"
                > </mapgis-ogc-wmts-layer>
            </mapgis-web-map>
        </mapgis-compare>
    </div>
    
    <script>
        var leftMap, rightMap;
        new Vue({
            el: '#app',
            data() {
                return {
                    orientation: "horizontal",
                    mapStyle: {
                        //设置版本号，一定要设置
                        version: 8,
                        //添加来源
                        sources: {},
                        //设置加载并显示来源的图层信息
                        layers: []
                    }, // 地图样式
                    mapZoom: 2, // 地图初始化级数
                    outerCenter: [116.39, 40.2], // 地图显示中心
                    mapCrs: 'EPSG:4326',

                    layerWmts: {},
                    layerWmtsId: 'ogcwmts_layerId',
                    sourceWmtsId: 'ogcwmts_sourceId',
                    wmtsurl1: 'http://t0.tianditu.gov.cn/img_c/wmts',
                    tileMatrixSet1: 'c',
                    layer1:"img",
                    format:"tiles",
                    token: {
                        key: 'tk',
                        value: 'f5347cab4b28410a6e8ba5143e3d5a35'
                    },
                    wmtsurl2: 'http://t0.tianditu.gov.cn/vec_c/wmts',
                    tileMatrixSet2: 'c',
                    layer2:"vec"
                };
            }
        });
    </script>
</body>

</html>